<!-- 首页 -->
<template>
    <view class="home-wrap u-m-b-20">
        <!--        轮播图-->
        <view  class="content-box u-p-20 u-m-l-20 u-m-r-20">
            <!--            我的工作台-->
            <view class="u-flex u-flex-col u-m-t-40 yuangong-item">
                <view class="u-flex u-w-100s top-yuangong u-p-t-20 u-p-b-20" @click="toast">
                    <view class="u-flex u-flex-col u-row-left u-col-center list">
                        <view class="topnum"><image style="width: 80rpx;height: 80rpx;" src="/static/images/icons/sanyaosu.png"></image></view>
                        <view class="topname">三要素</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list">
                        <view class="topnum"><image style="width: 80rpx;height: 80rpx;" src="/static/images/icons/4yaosu.png"></image></view>
                        <view class="topname">四要素</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list">
                        <view class="topnum"><image style="width: 80rpx;height: 80rpx;" src="/static/images/icons/jiashi.png"></image></view>
                        <view class="topname">驾驶证核验</view>
                    </view>
                    <view class="u-flex u-flex-col u-row-left u-col-center list">
                        <view class="topnum"><image style="width: 80rpx;height: 80rpx;" src="/static/images/icons/yixingshi.png"></image></view>
                        <view class="topname">行驶证核验</view>
                    </view>
                </view>
            </view>

        </view>
    </view>
</template>

<script>

import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
export default {
    components: {

    },
    data() {
        return {
            goodsInfo:{
                images:[require('@/static/images/empty_network.png'),require('@/static/images/empty_network.png'),require('@/static/images/empty_network.png')]

            }
        };
    },
    computed: {
        ...mapGetters(['isLogin']),

    },
    onPullDownRefresh() {

    },

    onShow() {

    },
    onHide() {

    },
    onLoad() {
    },
    methods: {
        // 初始化
        init() {

        },
        denglu(){
            this.$store.dispatch("showAuthModal", "1233");
        },
        toast(){
            uni.showToast({
                title: '待开发中～',
                icon: 'none',
                duration: 1000,
                mask: true
            });
        }
    }
};
</script>

<style lang="scss" scoped>
page{
    background: #f8f8f8;
}
.swipers{
    width: 100%;
    height: 450rpx;
}
.kehu-item{
    border-radius: 20rpx;
    background: #061cb2;
    .top-kehu{
        background: #FFFFFF;
        border-radius: 20rpx;
        .topnum{
            font-size: 38rpx;
            margin-bottom: 10rpx;
        }
    }
}
.yuangong-item{
    background: transparent;
    border-radius: 20rpx;
}
.baobiao-item{
    .time-day{
        width: 100rpx;
        background: #1989fa;
        color: #fff;
        padding:6rpx 8rpx ;
    }
    .time-month{
        width: 100rpx;
        background: #fff;
        border-radius: 10rpx;
        color: #1989fa;
        padding:6rpx 8rpx ;
    }
}
.top-yuangong{
    flex-wrap: wrap;
}
.top-yuangong>.list {
    width: 24%;
}
.top-yuangong>.list:not(:nth-child(4n)) {
    margin-right: calc(4% / 3);
}
</style>
